<template>
    <view class="book-card-wrapper" @tap="watchMore(item)">
        <view class="book-card">
            <view class="img-wrapper">
                <image :class="{'round': idName==='author'}" mode="aspectFit" :src="item[idName+'Head']"/>
            </view>
            <view class="content">
                <view class="common-title">{{item[idName+'Name']}}</view>
                <view class="common-little-font">
                    {{item[idName+'Introduction']}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "book-card",
        props: {
            idName: {
                type: String,
                default: ''
            },
            item: {
                default: ()=>{},
                type: Object
            }
        },
        methods: {
            watchMore(item){
                uni.navigateTo({
                    url: `../../classification/class-info-list?idName=${this.idName}&id=${item[this.idName+'Id']}`
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .book-card-wrapper{
        .book-card {
            padding: 25rpx 0rpx;
            display: flex;
            justify-content: space-between;
        }
        .img-wrapper{
            flex: 0 0 280rpx;
            height: 210rpx;
            border-radius:4rpx;
            image {
                width: 100%;
                height: 100%;
            }
            .round{
                width: 210rpx;
                height: 210rpx;
                border-radius: 50%;
                margin-right: 50rpx;
            }
        }
        .content{
            flex-grow: 1;
            margin-left: 20rpx;
            .common-little-font{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        }
    }
</style>